<template>
  <div class="right">
    <div class="top" :style="{background:$store.state.config.theme}">
      <p class="iconClick">
        <i
          @click="changeLeftDisp"
          :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        ></i>
      </p>
      <div class="rightBtn">
        <div style="margin-right: 20px;">
          <topClone/>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          content="全屏显示"
          placement="top-start"
        >
          <span class="quanping" @click="fullScreen">
            <i class="iconfont icon-quanping"></i>
          </span>
        </el-tooltip>
        <el-dropdown @command="remuqp">
          <span class="el-dropdown-link">
            系统设置<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">修改密码</el-dropdown-item>
            <el-dropdown-item command="2"> 退出登录 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="topTab">
      <el-tabs
        tab-position="top"
        @tab-remove="removeTab"
        @tab-click='tabClick'
        v-model="tabIndex"
        :closable="$store.state.config.activeList.length == 1 ? false : true"
      >
        <el-tab-pane
          v-for="(item, index) of $store.state.config.activeList"
          :key="item.path"
          :label="item.name"
          :name="item.path"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { launchFullscreen } from "@/util/util.js";
import {mapState} from 'vuex';
import topClone from './top-clone.vue';
export default {
  name: "top",
  components:{topClone},
  data() {
    return {
      collapse: false,
      tabIndex: "/vel/index",
    };
  },
  computed:{
    ...mapState('config',['defaultActive','gettheme'])
  },
  watch:{
    defaultActive:{
      immediate:true,
      handler(value){
        this.tabIndex=value
      }
    },
  },
  created(){
    // this.tabIndex=this.defaultActive
  },
  methods: {
    remuqp(e) {
      if (e == 2) {
        localStorage.removeItem("xm-token");
        localStorage.removeItem('activeList')
        location.reload()
      }
    },
    // 全屏显示
    fullScreen() {
      launchFullscreen(document.documentElement);
    },
    handleClick(tab, event) {
      console.log(this.activeName);
    },
    // 关闭和开启测导航
    changeLeftDisp() {
      this.collapse = !this.collapse;
      this.$bus.$emit("changeLeftStatus", this.collapse);
    },
    // 选中时触发
    tabClick(event){
      if(this.defaultActive==event.name)return
      this.$router.push(event.name)
    },
    // 关闭页签
    removeTab(targetName) {
      console.log(targetName)
      let tabs = this.$store.state.config.activeList
      let activeName = this.tabIndex;
      let status=activeName === targetName
      if (status) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.path;
            }
          }
        });
      }
      let activeList = tabs.filter((tab) => tab.path !== targetName);
      this.$store.commit('config/updateTopTab',[activeList,activeName])
      if (status) this.$router.push(activeName)
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/share.scss';
.right {
  .top {
    height: 64px;
    // background: $--color-primary;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .topTab {
    background: #fff;
    margin-top: 2px;
    padding-left: 10px;
  }
  .rightBtn {
    display: flex;
    align-items: center;
    margin-right: 22px;
    .quanping {
      color: #fff;
      margin-right: 20px;
    }
  }
  .iconClick {
    margin-left: 20px;
    i {
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
<style >
.el-tabs__header {
  margin: 0;
}
.el-tabs__item {
  font-size: 10px;
}
</style>